<template>
  <div class="collapsestyle">
      <!-- 基本属性 -->
      <el-divider content-position="left">基本属性</el-divider>
    
    <!-- 折叠面板编辑选项 -->
    <el-form label-width="90px" label-position="left" size="small">
      <el-form-item label="手风琴模式">
        <el-switch v-model="datas.accordion"></el-switch>
      </el-form-item>
      
      <el-form-item label="圆角大小">
        <el-input v-model="datas.borderRadius" placeholder="例如：4px"></el-input>
      </el-form-item>
      
      <el-divider content-position="left">面板设置</el-divider>
      
      <el-button type="primary" size="small" @click="addPanel" style="margin-bottom: 15px;">
        添加面板
      </el-button>
      
      <div v-for="(item, index) in datas.items" :key="index" class="panel-item">
        <div class="panel-header">
          <span>面板 {{ index + 1 }}</span>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete" 
            circle
            @click="removePanel(index)"
          ></el-button>
        </div>
        
        <el-form-item :label="'标题'" label-width="50px">
          <el-input v-model="item.title" placeholder="请输入面板标题"></el-input>
        </el-form-item>
        
        <el-form-item :label="'内容'" label-width="50px">
          <el-input 
            v-model="item.content" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入面板内容"
          ></el-input>
        </el-form-item>
      </div>
      
      <el-form-item label="默认激活">
        <el-checkbox-group v-model="datas.activeNames">
          <el-checkbox 
            v-for="(item, index) in datas.items" 
            :key="index"
            :label="(index + 1).toString()"
          >
            面板 {{ index + 1 }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'collapsestyle',
  props: {
    datas: Object,
    'data-type': String,
  },
  methods: {
    addPanel() {
      const newIndex = this.datas.items.length + 1;
      this.datas.items.push({
        title: `折叠面板${newIndex}`,
        content: `内容${newIndex}`
      });
    },
    removePanel(index) {
      this.datas.items.splice(index, 1);
      
      // 更新activeNames，移除已删除面板的引用
      if (this.datas.activeNames) {
        this.datas.activeNames = this.datas.activeNames.filter(name => {
          return parseInt(name) !== index + 1;
        });
      }
    }
  }
}
</script>

<style scoped lang="less">
.collapsestyle {
  width: 100%;
  box-sizing: border-box;
  
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }
  
  .panel-item {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style> 